<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>游戏大厅</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/game_room.css">
  <script src="js/jquery.min.js"></script>
  <style>
    /*input::-webkit-input-placeholder {*/
    /*  color: #cccccc;*/
    /*  font-size: 14px;*/
    /*}*/


  </style>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
  <a href="#" class="title">五子棋对战</a>
  <!-- 用来占据中间位置 -->
  <span class="spacer"></span>
  <a href="game_hall.html">游戏大厅</a>

  <a href="login.html">注销</a>
  <!-- <a href="#">注销</a> -->
</div>
<!--整个页面的容器元素-->
<div class="container">
  <div>
    <!--  显示区域  -->
    <div id="screen2"> 等待玩家连接中...|</div>
    <!--  棋盘区域,需要基于canvas进行实现  -->
    <canvas id="chess" width="450px" height="450px"></canvas>
    <!--  显示区域  -->
    <div id="screen">等待玩家连接中...</div>
  </div>
</div>
<script>

  let gameInfo = {
    roomId: null,
    thisUserId: null,
    thatUserId: null,
    isWhite: true,
  }

  //////////////////////////////////////////////////
  // 设定界面显示相关操作
  //////////////////////////////////////////////////

  function setScreenText(me) {
    let screen = document.querySelector('#screen');
    if (me) {
      screen.innerHTML = "轮到你下棋";
      // //开始计时 -- 步时
      // console.log("当前步开始计时");
      // // 每局倒计时开启 10 分钟 结束后平局
      // let stepTime = setTimeout(function () {
      //   //平局
      //   let request = {
      //     message: "deuce",
      //     userId: gameInfo.thisUserId,
      //     row: -1,
      //     col: -1
      //   }
      //   websocket.send(JSON.stringify(request));
      // },600000);
      // //100000 10分钟
    } else {
      screen.innerHTML = "轮到对方下棋";
    }
  }

  //////////////////////////////////////////////////
  // 初始化 websocket
  //////////////////////////////////////////////////
  let websocketUrl = 'ws://'+ location.host +'/game';
  let websocket = new WebSocket(websocketUrl)

  websocket.onopen = function () {
    console.log("成功加入房间");
  }

  websocket.close = function () {
    console.log("离开房间");
  }

  websocket.onerror = function () {
    console.log("和服务器的连接出现异常");
  }

  websocket.onmessage = function (event) {
    console.log("服务器推送成功");
    console.log("[游戏准备就绪]->" + event.data);
    let resp = JSON.parse(event.data);

    if(resp.message != "gameReady") {
      console.log("响应类型错误!")
      location.replace("/game_Hall.html");
      return;
    }

    if(!resp.ok) {
      console.log("加入游戏房间失败!" + "原因：" + resp.reason);
      alert("加入游戏房间失败!" + "原因：" + resp.reason);
      location.replace("/game_Hall.html");
      return;
    }

    gameInfo.roomId = resp.roomId;
    gameInfo.thisUserId  = resp.thisUserId;
    gameInfo.thatUserId = resp.thatUserId;
    gameInfo.isWhite = (resp.whiteUser == resp.thisUserId);

    //初始化棋盘
    initGame();
    //设置显示区域的内容
    //isWhite 是先手
    setScreenText(gameInfo.isWhite);

  }

  //关闭浏览器断开连接
  window.onbeforeunload = function () {
    websocket.close();
  }



  //////////////////////////////////////////////////
  // 初始化一局游戏
  //////////////////////////////////////////////////

  function initGame() {
    // 是我下还是对方下. 根据服务器分配的先后手情况决定
    let me = gameInfo.isWhite;

    //底部屏幕
    let screen = document.querySelector('#screen');

    //下棋计时
    let stepTimes;
    let stepTips;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表示棋盘的数组)
    for (let i = 0; i < 15; i++) {
      chessBoard[i] = [];
      for (let j = 0; j < 15; j++) {
        chessBoard[i][j] = 0;
      }
    }
    let chess = document.querySelector('#chess');
    let context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    // 背景图片
    let logo = new Image();
    logo.src = "img/chessboard.png";
    logo.onload = function () {
      context.drawImage(logo, 0, 0, 450, 450);
      initChessBoard();
    }

    // 绘制棋盘网格
    function initChessBoard() {
      for (let i = 0; i < 15; i++) {
        context.moveTo(15 + i * 30, 15);
        context.lineTo(15 + i * 30, 430);
        context.stroke();
        context.moveTo(15, 15 + i * 30);
        context.lineTo(435, 15 + i * 30);
        context.stroke();
      }
    }

    // 绘制一个棋子, me 为 true
    function oneStep(i, j, isWhite) {
      context.beginPath();
      context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
      context.closePath();
      var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
      if (!isWhite) {
        gradient.addColorStop(0, "#0A0A0A");
        gradient.addColorStop(1, "#636766");
      } else {
        gradient.addColorStop(0, "#D1D1D1");
        gradient.addColorStop(1, "#F9F9F9");
      }
      context.fillStyle = gradient;
      context.fill();
    }

    //下棋计时
    // let date2 =
    function time_step(date2) {
      stepTimes = setTimeout(function () {
        //下棋时间到 轮询下一个人下棋
        let request = {
          message: "stepTime",
          userId: gameInfo.thisUserId,
          row: -1,
          col: -1
        }
        websocket.send(JSON.stringify(request));
      },180000);

      //每秒更新底部屏幕上显示时间
      stepTips = setInterval(function (){
        screen.innerHTML = screen.innerHTML.split("|")[0];
        screen.innerHTML = screen.innerHTML + " | " +countDown2(date2);
      },1000);

    }

    if(me) {
      time_step(new Date());
    }


    function countDown2(date) {
      var time = 180000;
      var nowTime = date; //获取当前总毫秒数
      var inputTime = nowTime.getTime(); //用户输入的总毫秒数
      times = (inputTime + time - new Date().getTime()) / 1000; //剩余的总秒数
      //转换为天
      var d = parseInt(times / 60 / 60 / 24);
      //转换为时
      var h = parseInt(times / 60 / 60 % 24);
      //设置成时钟格式 00：00：00 利用三元运算符
      h = h < 10 ? "0" + h : h
      //转换为分
      var m = parseInt(times / 60 % 60);
      m = m < 10 ? "0" + m : m
      //转换成秒
      var s = parseInt(times % 60);
      s = s < 10 ? "0" + s : s

      return "下棋时间剩余:" + m + "分" + s + "秒";
    }





    //下棋子
    chess.onclick = function (e) {
      if (over) {
        return;
      }
      if (!me) {
        return;
      }
      let x = e.offsetX;
      let y = e.offsetY;
      // 注意, 横坐标是列, 纵坐标是行
      let col = Math.floor(x / 30);
      let row = Math.floor(y / 30);
      if (chessBoard[row][col] == 0) {
        // TODO 发送坐标给服务器, 服务器返回结果 | 对应到一开始设计的约定的接口
        send(row,col);
        //等待服务器返回响应后再绘画棋子
      }
    }

    function send(row,col) {
      console.log("发送落子请求给服务器");

      let request = {
        message: "putChess",
        userId: gameInfo.thisUserId,
        row: row,
        col: col
      }
      websocket.send(JSON.stringify(request));
    }

    console.log("本局开始计时");
    // 每局倒计时开启 10 分钟 结束后平局
    let roomTime = setTimeout(function () {
      //平局
      let request = {
        message: "deuce",
        userId: gameInfo.thisUserId,
        row: -1,
        col: -1
      }
      websocket.send(JSON.stringify(request));
    },600000);
    //600000 10分钟




    //显示游戏剩余时间
    let gameTimes = document.querySelector('#screen2');
    gameTimes.innerHTML = gameTimes.innerHTML.split("|")[1];

     let date = new Date();
    let times;

    function countDown(date) {
      var time = 600000;
      var nowTime = date; //获取当前总毫秒数
      var inputTime = nowTime.getTime(); //用户输入的总毫秒数
       times = (inputTime + time - new Date().getTime()) / 1000; //剩余的总秒数
      //转换为天
      var d = parseInt(times / 60 / 60 / 24);
      //转换为时
      var h = parseInt(times / 60 / 60 % 24);
      //设置成时钟格式 00：00：00 利用三元运算符
      h = h < 10 ? "0" + h : h
      //转换为分
      var m = parseInt(times / 60 % 60);
      m = m < 10 ? "0" + m : m
      //转换成秒
      var s = parseInt(times % 60);
      s = s < 10 ? "0" + s : s

      return "游戏时间剩余:" + m + "分" + s + "秒";
    }

    //每秒更新顶部时间
    var timer = setInterval(function () {
      gameTimes.innerHTML = gameTimes.innerHTML.split("|")[0];
      gameTimes.innerHTML = gameTimes.innerHTML + " | " + countDown(date);
      if (times < 0) {
        clearInterval(timer);

        //底部计时取消
        clearTimeout(stepTimes);
        clearInterval(stepTips);
      }
    },1000);




    // TODO 处理落子响应逻辑.
    //修改websocket.onmessage 的回调方法
    //之前的websocketonmessage主要是用来处理了游戏就绪响应
    //在游戏就绪之后初始化完毕过后 在 initGame方法内部修改 websocket.onmessage 方法
    websocket.onmessage = function (event) {
      console.log("[处理落子请求]" + event.data)

      let resp = JSON.parse(event.data);
      if(resp.message != "putChess" && resp.message != "deuce" && resp.message != "stepTime") {
        console.log("响应类型错误!");
        return;
      }

      //游戏时间倒计时结束
      if(resp.message == "deuce" && resp.row == -1 && resp.col == -1 && resp.winner == -1) {
          //倒计时结束 平局
        screen.innerHTML = "游戏时间到! 恭喜你们不分伯仲,多加练习!";
        clearInterval(timer);
        return;

      }

      //判定当前响应是当前客户端的落子还是对手的落子
      if(resp.userId == gameInfo.thisUserId) {
          console.log("[我的落子]");
          //底部计时取消
          clearTimeout(stepTimes);
          clearInterval(stepTips);
          //根据一开始加入游戏时候确定的落子颜色来绘制落子
        //col 对应到棋盘的 行 row 对应到棋盘的列
        oneStep(resp.col,resp.row,gameInfo.isWhite);
      } else if(resp.userId == gameInfo.thatUserId) {
          console.log("[对手落子]");
          //根据一开始加入游戏时候确定的落子颜色来绘制落子
          oneStep(resp.col,resp.row,!gameInfo.isWhite);
      } else {
        console.log("[错误响应类型]");
        return;
      }

      if(resp.message != "stepTime") {
        //给棋盘对应位置设为1 方便后续判定此位置已经有棋子
        chessBoard[resp.row][resp.col] = 1;
      }

      //交换双方的落子轮次
      me = !me;

      //设置底部文字提示
      setScreenText(me);

      //换对手底部开始提示下棋倒计时
      if(me) {
        time_step(new Date());
      }

      //判定游戏是否结束
      if(resp.winner != 0) {
        if(resp.winner == gameInfo.thisUserId) {
          //计时结束
          closeTimer();
          screen.innerHTML = "恭喜你赢得游戏胜利！"
          // clearTimeout(roomTime);
        } else if(resp.winner == gameInfo.thatUserId) {
          //顶部计时取消
          closeTimer();
          screen.innerHTML = "你输了！请再接再厉。"

        } else if(resp.winner == -1) {
          //计时结束
          closeTimer();
          screen.innerHTML = "和棋!"
        }else if(resp.winner == 4) {

          //计时结束
          closeTimer();
          screen.innerHTML = "对手离开房间，请回到大厅重新匹配!"
          alert("对手离开房间，请回到大厅重新匹配!");
          location("/game_hall.html")
        } else {
          console.log("winner字段发生错误")
        }

      }

      }

      //游戏分出胜负以后停止计时 + 停止更新屏幕信息
      function closeTimer() {
      //顶部计时结束
        clearTimeout(roomTime);
        //停止更新屏幕信息
        clearInterval(timer);

        //底部计时结束
        clearTimeout(stepTimes);
        //停止更新屏幕信息
        clearInterval(stepTips);
      }


  }






</script>
</body>

</html>
</body>
</html>